<template>
  <div v-move class="box">
    <div class="header"></div>
    <div>内容</div>
  </div>
</template>
<script setup lang="ts">
import {Directive, DirectiveBinding, ref} from 'vue'

const vMove:Directive<any,void> = (el:HTMLElement,binding:DirectiveBinding)=>{
  let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElement;
  console.log(moveElement)
  const mouseDown = (e:MouseEvent)=>{
    let x = e.clientX - el.offsetLeft;
    let y = e.clientY - el.offsetTop;
    const move = (e:MouseEvent)=>{
      console.log(e)
      el.style.left = e.clientX - x +'px'
      el.style.top = e.clientY - y +'px'
    }
    document.addEventListener("mousemove",move)
    document.addEventListener("mouseup",()=>{
      document.removeEventListener("mousemove",move)
    })
  }
  moveElement.addEventListener('mousedown',mouseDown)
}
</script>

<style lang="less" scoped>
.box{
  position: fixed;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
  border: 1px solid black;
  .header{
    height: 30px;
    background: #1a1a1a;
  }
}
</style>
